<template>
	<view class="store-detail" :style="css.page+'min-height:'+$xyfun.xysys().windowHeight+'px'" v-if="!isLoading">
		<view class="top ovh">
			<swiper :circular="true" :autoplay="false" interval="5000" duration="500">
				<swiper-item v-for="(item, keys) in storeInfo.images" :key="keys" >
					<image :src="item" @tap="$xyfun.pi(keys,storeInfo.images)" />
					<view class="total ts-28 tc-w"><text>{{keys+1}}</text>/<text>{{storeInfo.images.length}}</text></view>
				</swiper-item>
			</swiper>
		</view>
		<view class="info-box m-30 p-tb-30 p-lr-30 br-10 bc-w">
			<view class="name-box flex">
				<view class="name m-r-20 ts-32 tb">
					{{storeInfo.name}}
				</view>
				<view class="m-l-auto ts-26" @tap="$xyfun.to('/pages/store/select')">
					切换场馆<text class="xyicon icon-right"></text>
				</view>
			</view>
			<view class="open-box m-t-30 flex ts-28" :style="css.tcl">
				<view class="l">
					<view><text class="xyicon icon-time m-r-10"></text> 营业时间：{{storeInfo.businesshours}}</view>
					<view class="m-t-15 address">
						<text class="xyicon icon-loc m-r-10"></text>
						{{storeInfo.city}} {{storeInfo.address}}
					</view>
				</view>
				<view class="r m-l-auto tc" @tap="$xyfun.openLoc(storeInfo.latitude,storeInfo.longitude,storeInfo.name,storeInfo.city+storeInfo.address)">
					<view class="xyicon icon-dh ts-34" :style="css.tcmc"></view>
					<view class="ts-28 m-t-5">{{$xyfun.distance(storeInfo.distance,true)}}</view>
				</view>
			</view>
		</view>
		
		<view class="service-box m-30 p-t-30 p-lr-30 br-10 bc-w" v-if="storeInfo.service && storeInfo.service.length">
			<view class="ts-32 tb flex lh-32"><view class="line m-r-10" :style="css.mcbg"></view>场馆服务</view>
			<view class="service-list m-t-30 flex">
				<view class="item tc m-b-30" v-for="(item,index) in storeInfo.service" :key="item.id">
					<view><image :src="item.logoimage" /></view>
					<view class="ts-28 m-t-10">{{item.name}}</view>
				</view>
			</view>
		</view>
		
		<view class="venue-box m-30 p-t-30 p-lr-30 br-10 bc-w" v-if="storeInfo.venue && storeInfo.venue.length">
			<view class="ts-32 tb flex lh-32"><view class="line m-r-10" :style="css.mcbg"></view>场地预定</view>
			<view class="venue-list m-t-30 flex">
				<view class="item tc m-b-30 bl br-10" :style="css.blpc" v-for="(item,index) in storeInfo.venue" :key="item.id" @tap="$xyfun.to('/pages/store/venue?venue_id='+item.id)">
					<view class="ts-28 p-lr-30 p-tb-20" :style="css.pbg">{{item.name}}</view>
					<view class="p-tb-20" :style="css.tcmc">立即预定</view>
				</view>
			</view>
		</view>
		
		<view class="content m-30 p-tb-30 p-lr-30 br-10 bc-w">
			<view class="ts-32 tb flex lh-32"><view class="line m-r-10" :style="css.mcbg"></view>场馆介绍</view>
			<view class="venue-list m-t-30 flex">
				<rich-text :nodes="storeInfo.content"></rich-text>
			</view>
		</view>
		
		<xy-tabbar />
		
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import xyTabbar from '@/components/xy-tabbar';
	export default {
		components: {
			xyTabbar,
		},
		data() {
			return {
				css:{},
				lat: 0,
				lng: 0,
				isLoading:true,
				storeInfo:{},
			}
		},
		computed: {
			...mapState(['user'])
		},
		onPullDownRefresh() {
			this.loadData();
		},
		onShareAppMessage() {
			var shareobj = {
				title: this.storeInfo.name,
				path: '/pages/index',
				imageUrl: this.storeInfo.images[0]
			}
			return shareobj;
		},
		onShow() {
			this.$xyfun.setNavBg();
			this.css = this.$xyfun.css();
			this.$xyfun.loc().then((res)=>{
				this.lat = res.latitude;
				this.lng = res.longitude;
				this.loadData();
			},()=>{
				this.loadData();
			})
		},
		methods: {
			loadData(){
				this.$xyfun.storeId().then((store_id)=>{
					this.$api.get({
						url: '/store/detail',
						loadingTip:'加载中...',
						data: {
							id:store_id,
						},
						success: res => {
							uni.stopPullDownRefresh();
							this.$xyfun.setNavTitle(res.name);
 							this.isLoading = false;
							this.storeInfo = res;
							this.storeInfo.distance = this.$xyfun.algorithm([res.latitude,res.longitude],[this.lat,this.lng]);
						}
					});
				})
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.store-detail{
		padding-bottom: 120rpx;
		.line{width: 6rpx;border-radius: 5rpx;height: 30rpx;}
		.top,.top swiper{
			width: 750rpx;height: 400rpx;position: relative;position: relative;
			image{
				width: 750rpx;height: 400rpx;
			}
			.total{
				background: rgba(0, 0, 0, 0.5);
				position: absolute; right: 30rpx; bottom: 30rpx;
				padding: 3rpx 15rpx;border-radius: 20rpx;
				text{margin: 0 10rpx;}
			}
		}
		.info-box{
			.name image{height: 34rpx;vertical-align: middle;}
			.open-box{
				.l{
					width:495rpx;
					.address{height: 30rpx;line-height: 30rpx;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow:ellipsis;}
				}
			}
		}
		
		.service-box{
			.item{
				width: 25%;
				image{width: 60rpx;height: 60rpx;}
			}
			
		}
		
		.venue-list{
			.item{
				width: 300rpx;
			}
			.item:nth-child(2n){
				margin-right: 0;
				margin-left: auto;
			}
		}
	}
</style>
